html, body {
  background: #ffcddf;
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
ol,ul,li,p,dl,dt,dd{margin:0; padding:0; list-style:none;}
a,img,button,canvas,div{ -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; }


.pc{position: fixed; width: 100%; height: 100%; overflow: hidden; text-align: center; padding-top:100px; z-index: 9999; font-size: 30px; background: #fff; display: none;}

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}


.loading{position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; z-index:80; background:#fff; display: block;}
.spinner {
  margin: 450px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
 
.spinner > div {
  background-color: #000;
  height: 100%;
  width: 6px;
  display: inline-block;
   
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;

  /* Center slide text vertically */
  /*
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  */
}



.wrap{position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 1;}

.intro{position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 20;}
.intro canvas{width: 750px; height: 1450px;}
.intro .btn-start{position: absolute; left: 50%; bottom: 100px; margin-left: -156px; z-index: 5;}

.select-bg{position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 19;}
.select-bg .shake-tips{position: absolute; width: 404px; height: 215px; left: 50%; top: 40%; margin-left: -222px; margin-top: -107px; z-index: 5;}
.select-bg .shake-tips .shake-icon{position: absolute; left: 190px; top: 20px;}
.select-bg .shake-tips .swinging{-webkit-animation:  icon_swinging_animate 3.5s linear 0.5s infinite;}
@-webkit-keyframes icon_swinging_animate{
    0%{-webkit-transform:translateX(20px);}
    3%{-webkit-transform:translateX(0px);}
    6%{-webkit-transform:translateX(20px);}
    9%{-webkit-transform:translateX(0px);}
    12%{-webkit-transform:translateX(20px);}
    15%{-webkit-transform:translateX(0px);}
    18%{-webkit-transform:translateX(20px);}
    21%{-webkit-transform:translateX(0px);}
    100%{-webkit-transform:translateX(0px);}
}
.select-bg .swiper-container{pointer-events: none;}
.select-bg .shake-tips .shake-icon-tips{position: absolute; left: 140px; top: 120px;}
.select-bg .btn-selcet-comfim{position: absolute; left: 50%; bottom: 100px; margin-left: -156px; z-index: 5;}
.select-bg .isit{position: absolute; width: 313px; height: 105px; left: 50%; bottom: 100px; margin-left: -156px; z-index: 7;}

.ugc{position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 1;}
.ugc canvas{width: 750px; height: 1450px;}
.ugc .select-icons{position: absolute; width: 100%; height: 180px; overflow: hidden; z-index: 10; left: 0; bottom: 0; margin: 0; padding: 0;}
.ugc .select-icons .elements{width: 100%; height: 100px;position: relative;background: url('../img/icon-bg-1.png');border-top:1px solid #fff;}

.elements  .swiper-button-prev{background:url(../img/arrow-left.png) no-repeat;position: absolute; left: 0; top: 25px; z-index: 5; -webkit-animation: arrow-left 1s infinite ease-in-out;width: 50px;height: 100px;}
.elements .swiper-button-next{background:url(../img/arrow-right.png) no-repeat;position: absolute; right: 0; top: 25px; z-index: 5; -webkit-animation: arrow-right 1s infinite ease-in-out;width: 50px;height: 100px;}
.elements .swiper-button-prev.swiper-button-disabled,.elements .swiper-button-next.swiper-button-disabled{opacity: 0;}

@-webkit-keyframes arrow-left {
  0%{margin-left: 0;} 
  50%{margin-left: -10px;} 
  100%{margin-left: 0;} 
}
@-webkit-keyframes arrow-right {
  0%{margin-right: 0;} 
  50%{margin-right: -10px;} 
  100%{margin-right: 0;} 
}
.ugc .select-icons .labels{width: 100%; height: 80px;}
.ugc .select-icons .labels li{position: relative; padding: 0; margin: 0; width: 250px; height: 100%; float: left; background: #fff; vertical-align:middle; display: table-cell;}
.ugc .select-icons .labels li:first-child{background: #f4eff1;}
.ugc .select-icons .labels li img{text-align: center; display: block; margin: 0 auto;  padding-top: 10px;}
.ugc .btn-back{position: absolute; left: 20px; top: 20px; z-index: 5;}
.ugc .btn-ok{position: absolute; right: 20px; top: 20px; z-index: 5;}

.result{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 60; display: none; background: #F6E2D8;}
.result .save-tips{position: absolute; left: 50%; bottom: 150px; margin-left: -87px; z-index: 10;}
.result .btn-chakan{position: absolute; left: 50px; bottom: 50px; z-index: 10;}
.result .btn-replay{position: absolute; right: 50px; bottom: 50px; z-index: 10;}
.result .btn-home-black, .products .btn-home-black{position: absolute; left: 50%; bottom: 50px; z-index: 150;transform: translateX(-50%);display: none;}
.temp_save{position: absolute;z-index: 9;top: 0;left: 0;opacity: 0.01;}


.bgLogo{top:10px;position: absolute;z-index: 10;left: 50%;transform: translateX(-50%);}
.btn_skip{width: 100px;height: 50px;background: rgba(0,0,0,0) none repeat;position: absolute;z-index: 10;top: 10px;right: 10px;}
#gift{opacity: 0;}
.select_con{width: 100%;height: 100px;overflow: hidden;}
.products{position: fixed;top:0;left:0;width: 100%;height: 100%;z-index: -1;opacity: 0;}
.product_box{width: 571px;height: 794px;background: #fff;/* border-radius: 10px;box-shadow: 0 0 10px #999; */position: absolute;z-index: 10;top: 46%;left: 50%;transform: translate(-50%,-50%);padding:60px 30px 60px 50px;background: url(../img/product-bg.png) no-repeat;}
.product_con{overflow: hidden;width: 520px;height: 750px;position: relative;margin:22px 25px;}
.product_con li{padding-bottom:30px;}
.product_con li:last-child{padding-bottom:0px;}
.btn-close{position: absolute;top: 45px;right: 45px;}
.ugc .text_con{position: absolute; width: 100%; height: 180px; overflow: hidden; z-index: -1; left: 0; bottom: 0; margin: 0; padding: 0;}
.text_con .tips{width: 100%; height: 80px;background: #fff;position: relative;}
.text_con .elements{height: 100px;}
.tips_img{position: absolute;z-index: 1;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.select_tips{position: fixed;z-index: 1000;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5) none repeat;display: none;}
.tips_step1{position: absolute;z-index: 1;bottom: 0;left: 0;}
.tips_step2,.tips_step3{position: absolute;z-index: 1;top: 60%;left: 85px;transform: translateY(-50%);display: none;}
.btn_tips_step1{width: 160px;height: 60px;background: rgba(0,0,0,0) none repeat;left: 307px;bottom: 222px;position: absolute;z-index: 1;}
.btn_tips_step2,.btn_tips_step3{left:224px;top: 450px;width: 160px;height: 60px;background: rgba(0,0,0,0) none repeat;position: absolute;z-index: 1;}

.change_tips{width: 291px;height: 39px;position: fixed;z-index: 10;bottom: 210px;left: 50%;transform: translateX(-50%);}
.change_tips.black{background: url(../img/shake-find-more-black.png) no-repeat;}
.change_tips.white{background: url(../img/shake-find-more-white.png) no-repeat;}
.change_tips_hand{width: 291px;height: 39px;position: fixed;z-index: 10;bottom: 210px;left: 50%;margin-left:-152px;-webkit-animation:  icon_swinging_animate 3.5s linear 1s infinite;}
.change_tips_hand.black{background: url(../img/shake-find-hand-black.png) no-repeat;}
.change_tips_hand.white{background: url(../img/shake-find-hand-white.png) no-repeat;}
.btn_create{width: 313px;height: 105px;position: fixed;z-index: 10;bottom: 50px;left: 50%;transform: translateX(-50%);}
.btn_create.black{background: url(../img/btn-my-black.png) no-repeat;}
.btn_create.white{background: url(../img/btn-my-white.png) no-repeat;}

@media (min-height:1300px ){ 
	.ugc .select-icons{height: 260px;}
	.ugc .select-icons .elements{height: 130px;background-color:#F4EFF1;background-position: center;background-repeat: no-repeat;}
	.select_con{height: 130px;}
	.ugc .select-icons .labels{height: 130px;}
	.ugc .select-icons .labels li img{margin-top:33px;}
	.ugc .select-icons .elements .swiper-slide img{position: absolute;top:50%;transform: translateY(-50%);left: 0;}
	.tips_step1{bottom:60px;}
}










